<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
	table.board {
    	border-collapse: collapse;
    }
	table.board th {
		background-color:#cfc28b;
		color:#000000;
		text-align:center;
		vertical-align:middle;
		font-size:90%;
		height:20px;
		width:20px;
	}
	table.board td {
		border: 1px solid #eeeeee; 
		text-align:center;
		vertical-align:middle;
		height:70px;
		width:70px;
	}
	table.board td.dark {
		background-color:#bf924f;
	}
	table.board td.light {
		background-color:#ddcea3;
	}
	table.board td.darkHi {
		background-color:#2282be;
	}
	table.board td.lightHi {
		background-color:#88cbff;
	}
	img.piece {
		border:0px;
		width:100%;
		height:100%;
	}
	img.indicatorWhite {
		width:50%;
		height:50%;
		background-color:#FFFFFF;
		border: 1px solid #000000;
	}
	img.indicatorBlack {
		width:50%;
		height:50%;
		background-color:#000000;
		border: 1px solid #FFFFFF;
	}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Chessboard</title>
</head>
<body>
<script type="text/javascript">
	var pgn="";
	var board=new Array();
	var captured=new Array();
	var nonePiece=document.createElement("img");

	//Castling
	var ooo=true;
	var OOO=true;
	var oo=true;
	var OO=true;

	//En Passant
	var ep=-1;

	//Is white to move?
	var whiteTurn=true;
	
	function initBoard()
	{
		nonePiece.setAttribute("src", getPieceImg(" "));
		nonePiece.setAttribute("class", "piece");
		
		for (var i=0;i<8;i++)
		{
			for (var k=0;k<8;k++)
			{
				var fieldNum=(i*8)+k;
				switch (fieldNum)
				{
				case 0:
				case 7:
					board[fieldNum]="R";
					break;
				case 1:
				case 6:
					board[fieldNum]="N";
					break;
				case 2:
				case 5:
					board[fieldNum]="B";
					break;
				case 3:
					board[fieldNum]="Q";
					break;
				case 4:
					board[fieldNum]="K";
					break;
				case 8:
				case 9:
				case 10:
				case 11:
				case 12:
				case 13:
				case 14:
				case 15:
					board[fieldNum]="P";
					break;
				case 56:
				case 63:
					board[fieldNum]="r";
					break;
				case 57:
				case 62:
					board[fieldNum]="n";
					break;
				case 58:
				case 61:
					board[fieldNum]="b";
					break;
				case 59:
					board[fieldNum]="q";
					break;
				case 60:
					board[fieldNum]="k";
					break;
				case 48:
				case 49:
				case 50:
				case 51:
				case 52:
				case 53:
				case 54:
				case 55:
					board[fieldNum]="p";
					break;
				default:
					board[fieldNum]="";
				}
			}
		}
	}

	function drawBoard(forBlack)
	{
		document.write("<table class=\"board\">");
		document.write("<tr><th colspan=\"9\"></th><th><img id=\"indicator\" class=\"indicatorWhite\" src=\""+getPieceImg("")+"\" /></th></tr>");
		for (var i=forBlack?0:7;forBlack?(i<=7):(i>=0);forBlack?i++:i--)
		{
			document.write("<tr><th>"+(i+1)+"</th>");
			for (var k=forBlack?7:0;forBlack?(k>=0):(k<=7);forBlack?k--:k++)
			{
				var fieldNum=(i*8)+k;
				var classBG="";
				if ((i%2)==0)
				{
					classBG=((k%2)==0)?"dark":"light";
				} else {
					classBG=((k%2)==0)?"light":"dark";
				}
				document.write("<td class=\""+classBG+"\" id=\"field"+fieldNum+"\" onclick=\"javascript:setFromTo("+fieldNum+")\" style=\"cursor:pointer;cursor:hand;\">");
				//document.write("<a class=\"piece\" href=\"javascript:setFromTo("+fieldNum+")\">");
				document.write("<img class=\"piece\" src=\""+getPieceImg(board[fieldNum])+"\" />");
				//document.write("</a>");
				document.write("</td>");
			}
			document.writeln("<th></th></tr>");
		}
		document.write("<tr><th></th>")
		for (var k=forBlack?7:0;forBlack?(k>=0):(k<=7);forBlack?k--:k++)
		{
			document.write("<th>"+String.fromCharCode("A".charCodeAt(0)+k)+"</th>");
		}
		document.write("<th></th></tr>");
		document.write("</table>");
	}

	function getPieceImg(ascSym)
	{
		var preFix="../resources/chessFigures/";
		var fileExt=".png";
		var postFix="_"+(ascSym==ascSym.toUpperCase()?"white":"black")+fileExt;
		switch (ascSym.toUpperCase())
		{
		case "R":
			return preFix+"rook"+postFix;
		case "N":
			return preFix+"knight"+postFix;
		case "B":
			return preFix+"bishop"+postFix;			
		case "Q":
			return preFix+"queen"+postFix;			
		case "K":
			return preFix+"king"+postFix;			
		case "P":
			return preFix+"pawn"+postFix;
		default:
			return preFix+"none"+fileExt;
		}
	}

	function drawPosition()
	{
		for (var i=0;i<=7;i++)
		{
			for (var k=0;k<=7;k++)
			{
				var fieldNum=(i*8)+k;
				document.getElementById("field"+fieldNum).childNodes[0].setAttribute("src",getPieceImg(board[fieldNum]));
			}
		}
	}

	function setFromTo(fieldNum)
	{
		var from=ext2Field(document.getElementById("from").value);
		var to=ext2Field(document.getElementById("to").value);
   		var fromNode=document.getElementById("field"+from);
   		var toNode=document.getElementById("field"+to);
		if ((fromNode!=null)&&(fromNode.getAttribute("class")=="darkHi"))
		{
			fromNode.setAttribute("class","dark");
		} else {
			if ((fromNode!=null)&&(fromNode.getAttribute("class")=="lightHi"))
			{
				fromNode.setAttribute("class","light");
			}
		}			   		
		if ((toNode!=null)&&(toNode.getAttribute("class")=="darkHi"))
		{
			toNode.setAttribute("class","dark");
		} else {
			if ((toNode!=null)&&(toNode.getAttribute("class")=="lightHi"))
			{
				toNode.setAttribute("class","light");
			}
		}			   		

		if ((to>=0)&&(to<=63))
		{
			document.getElementById("to").value="";
			document.getElementById("from").value=field2Ext(fieldNum);
		} else {
			if ((from>=0)&&(from<=63))
			{
				if (from==fieldNum)
				{
					document.getElementById("from").value="";
				} else {
					document.getElementById("to").value=field2Ext(fieldNum);
				}
			} else {
				document.getElementById("from").value=field2Ext(fieldNum);
			}
		}

		from=ext2Field(document.getElementById("from").value);
		to=ext2Field(document.getElementById("to").value);
   		fromNode=document.getElementById("field"+from);
   		toNode=document.getElementById("field"+to);
		if ((fromNode!=null)&&(fromNode.getAttribute("class")=="dark"))
		{
			fromNode.setAttribute("class","darkHi");
		} else {
			if ((fromNode!=null)&&(fromNode.getAttribute("class")=="light"))
			{
				fromNode.setAttribute("class","lightHi");
			}
		}			   		
		if ((toNode!=null)&&(toNode.getAttribute("class")=="dark"))
		{
			toNode.setAttribute("class","darkHi");
		} else {
			if ((toNode!=null)&&(toNode.getAttribute("class")=="light"))
			{
				toNode.setAttribute("class","lightHi");
			}
		}			   		
	}

	function field2Ext(field)
	{
		try
		{
			var row=Math.floor(field/8);
			var col=field%8;
			return String.fromCharCode("a".charCodeAt(0)+col)+(row+1);
		} catch (e) {
			return "";
		}
	}

	function ext2Field(ext)
	{
		try
		{
			var col=ext.toLowerCase().charCodeAt(0)-"a".charCodeAt(0);
			var row=parseInt(ext.charAt(1))-1;
			return (row*8)+col;
		} catch (e) {
			return -1;
		}
	}
	
	function draw()
	{
		var from=ext2Field(document.getElementById("from").value);
		var to=ext2Field(document.getElementById("to").value);

   		var fromNode=document.getElementById("field"+from);
   		var toNode=document.getElementById("field"+to);
		if ((fromNode!=null)&&(fromNode.getAttribute("class")=="darkHi"))
		{
			fromNode.setAttribute("class","dark");
		} else {
			if ((fromNode!=null)&&(fromNode.getAttribute("class")=="lightHi"))
			{
				fromNode.setAttribute("class","light");
			}
		}			   		
		if ((toNode!=null)&&(toNode.getAttribute("class")=="darkHi"))
		{
			toNode.setAttribute("class","dark");
		} else {
			if ((toNode!=null)&&(toNode.getAttribute("class")=="lightHi"))
			{
				toNode.setAttribute("class","light");
			}
		}			   		

		document.getElementById("from").value="";
		document.getElementById("to").value="";
		if ((whiteTurn&&(board[from].toUpperCase()==board[from]))||(!whiteTurn&&(board[from].toLowerCase()==board[from])))
		{
			var oldEp=ep;
			var moveOk=false;
			switch (board[from].toUpperCase())
			{
			case "P":
				moveOk=pawnMove(from,to);
				break;
			case "B":
				moveOk=bishopMove(from,to);
				break;
			case "R":
				moveOk=rookMove(from,to);
				break;
			case "Q":
				moveOk=queenMove(from,to);
				break;
			case "N":
				moveOk=knightMove(from,to);
				break;
			case "K":
				moveOk=kingMove(from,to);
				break;
			}
			if (moveOk)
			{
				if ((oldEp==ep)&&(oldEp>-1))
				{
					ep=-1;
				}
				whiteTurn=!whiteTurn;
				if (whiteTurn)
				{
					document.getElementById("indicator").setAttribute("class","indicatorWhite");
				} else {
					document.getElementById("indicator").setAttribute("class","indicatorBlack");
				}
			} else {
				alert("1 Illegal move!");
			}
		} else {
			alert("2 Illegal move!");
		}		
	}

	function pawnMove(from,to) {
		var fromRow=Math.floor(from/8);
		var fromCol=from%8;
		var toRow=Math.floor(to/8);
		var toCol=to%8;
		if (board[from].toUpperCase()==board[from]) //white move
		{
			if (toRow==(fromRow+1)) 
			{
				if ((toCol==(fromCol-1))||(toCol==(fromCol+1))) //capturing
				{
					if ((board[to]!="")&&(board[to]==board[to].toLowerCase()))
					{
						move(from,to);
						return true;
					} else {
						if (to==ep)
						{
							move(from,to);
							removePiece(((toRow-1)*8)+toCol);
							return true;
						} else {
							return false;
						}
					}
				} else {
					if (toCol==fromCol) //normal move
					{
						if (board[to]=="")
						{
							move(from,to);
							return true;
						} else {
							return false;
						}
					} else {
						return false;
					}
				}
			} else {
				if (((fromRow==1)&&(toRow==(fromRow+2)))&&(toCol==fromCol)) //double move
				{
					if ((board[from+8]=="")&&(board[to]==""))
					{
						ep=from+8;
						move(from,to);
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			}
		} else { //black move
			if (toRow==(fromRow-1)) 
			{
				if ((toCol==(fromCol-1))||(toCol==(fromCol+1))) //capturing
				{
					if ((board[to]!="")&&(board[to]==board[to].toUpperCase()))
					{
						move(from,to);
						return true;
					} else {
						if (to==ep)
						{
							move(from,to);
							removePiece(((toRow+1)*8)+toCol);
							return true;
						} else {
							return false;
						}
					}
				} else {
					if (toCol==fromCol) //normal move
					{
						if (board[to]=="")
						{
							move(from,to);
							return true;
						} else {
							return false;
						}
					}
				}
			} else {
				if (((fromRow==6)&&(toRow==(fromRow-2)))&&(toCol==fromCol)) //double move
				{
					if ((board[from-8]=="")&&(board[to]==""))
					{
						ep=from-8;
						move(from,to);
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			}
		}
	}

	function bishopMove(from,to)
	{
		return moveDiagonal(from,to);
	}

	function moveDiagonal(from,to)
	{
		var fromRow=Math.floor(from/8);
		var fromCol=from%8;
		var toRow=Math.floor(to/8);
		var toCol=to%8;

		if ((Math.abs(fromRow-toRow)==Math.abs(fromCol-toCol))&&!(Math.abs(fromRow-toRow)==0))
		{
			var upDown=(toRow-fromRow)<0?-1:1;
			var leftRight=(toCol-fromCol)<0?-1:1;
			var pieceFound=false;
			for (var i=1;!pieceFound&&(i<Math.abs(fromRow-toRow));i++)
			{
				if (board[((fromRow+(i*upDown))*8)+(fromCol+(i*leftRight))]!="")
				{
					pieceFound=true;
				}
			}
			if (!pieceFound)
			{
				if ((board[to]=="")||((board[from]==board[from].toUpperCase())!=(board[to]==board[to].toUpperCase())))
				{
					move(from,to);
					return true;
				} else {
					return false;
				}
			} else {
				return false;
			}
		} else {
			return false;
		}
	}
	
	function rookMove(from,to)
	{
		var moveOk=moveStraight(from,to);
		if (moveOk)
		{
			if (from==0) 
			{
				OOO=false;
			} else {
				if (from==7)
				{
					OO=false;
				} else {
					if (from==55)
					{
						ooo=false;
					} else {
						if (from==63)
						{
							oo=false;
						}
					}
				}
			}
		}
		return moveOk;
	}

	function moveStraight(from,to)
	{
		var fromRow=Math.floor(from/8);
		var fromCol=from%8;
		var toRow=Math.floor(to/8);
		var toCol=to%8;

		if (((fromCol==toCol)&&(fromRow!=toRow))||((fromCol!=toCol)&&(fromRow==toRow)))
		{
			var upDown=((toRow-fromRow)<0)?-1:(((toRow-fromRow)>0)?1:0);
			var leftRight=((toCol-fromCol)<0)?-1:(((toCol-fromCol)>0)?1:0);
			var pieceFound=false;
			for (var i=1;!pieceFound&&((i<Math.abs(fromRow-toRow))||(i<Math.abs(fromCol-toCol)));i++)
			{
				if (board[((fromRow+(i*upDown))*8)+(fromCol+(i*leftRight))]!="")
				{
					pieceFound=true;
				}
			}
			if (!pieceFound)
			{
				if ((board[to]=="")||((board[from]==board[from].toUpperCase())!=(board[to]==board[to].toUpperCase())))
				{
					move(from,to);
					return true;
				} else {
					return false;
				}
			} else {
				return false;
			}
		} else {
			return false;
		}
	}

	function queenMove(from,to)
	{
		var moveOk=moveStraight(from,to);
		if (!moveOk) {
			moveOk=moveDiagonal(from,to);
		}
		return moveOk;
	}

	function knightMove(from,to)
	{
		var fromRow=Math.floor(from/8);
		var fromCol=from%8;
		var toRow=Math.floor(to/8);
		var toCol=to%8;

		if ((((toRow==fromRow+2)||(toRow==fromRow-2))&&((toCol==fromCol+1)||(toCol==fromCol-1)))||(((toRow==fromRow+1)||(toRow==fromRow-1))&&((toCol==fromCol+2)||(toCol==fromCol-2))))
		{
			if ((board[to]=="")||((board[from]==board[from].toUpperCase())!=(board[to]==board[to].toUpperCase())))
			{
				move(from,to);
				return true;
			} else {
				return false;
			}
		} else {
			return false;
		}
	}

	function kingMove(from,to)
	{
		var fromRow=Math.floor(from/8);
		var fromCol=from%8;
		var toRow=Math.floor(to/8);
		var toCol=to%8;

		if ((Math.abs(fromRow-toRow)<=1)&&(Math.abs(fromCol-toCol)<=1)&&((Math.abs(fromRow-toRow)!=0)||(Math.abs(fromCol-toCol)!=0))) //normal Move
		{
			if ((board[to]=="")||((board[from]==board[from].toUpperCase())!=(board[to]==board[to].toUpperCase())))
			{
				if (board[from]==board[from].toUpperCase())
				{
					OO=false;
					OOO=false;
				} else {
					oo=false;
					ooo=false;
				}
				move(from,to);
				return true;
			} else {
				return false;
			}
		} else {
			if ((Math.abs(fromRow-toRow)==0)&&(Math.abs(fromCol-toCol)==2)) //castling
			{
				if (fromRow==0) //white King
				{
					if ((toCol==2)&&OOO) //long side
					{
						move(from,to);
						move(0,3);
						return true;
					} else {
						if ((toCol==6)&&OO) //short side
						{
							move(from,to);
							move(7,5);
							return true;
						} else {
							return false;
						}
					}
				} else {
					if (fromRow==7) //black King
					{
						if ((toCol==2)&&ooo) //long side
						{
							move(from,to);
							move(56,59);
							return true;
						} else {
							if ((toCol==6)&&oo) //short side
							{
								move(from,to);
								move(63,61);
								return true;
							} else {
								return false;
							}
						}
					} else {
						return false;
					}
				}
			} else {
				return false;
			}
		}
	}
	
	function move(from,to)
	{
		if (board[to]!="")
		{
			captured[captured.length]=board[to];
		}
		board[to]=board[from];
		board[from]="";

   		var fromNode=document.getElementById("field"+from).childNodes[0];
   		var toNode=document.getElementById("field"+to).childNodes[0];
   		document.getElementById("field"+from).removeChild(fromNode);
   		document.getElementById("field"+to).removeChild(toNode);
   		document.getElementById("field"+from).appendChild(nonePiece.cloneNode(false));
   		document.getElementById("field"+to).appendChild(fromNode);
	}

	function removePiece(field)
	{
		captured[captured.length]=board[field];
		board[field]="";

		var node=document.getElementById("field"+field).childNodes[0];
   		document.getElementById("field"+field).removeChild(node);
   		document.getElementById("field"+field).appendChild(nonePiece.cloneNode(false));
	}
</script>
</body>
	<script type="text/javascript">
		initBoard();
		drawBoard(false);
		drawPosition();
	</script>
	<a href="javascript:initBoard()">initBoard</a>
	<a href="javascript:drawBoard(true)">Board for black</a>
	<a href="javascript:drawPosition()">redraw</a>
	<form action="javascript:draw()">
		<input id="from" type="text" />
		<input id="to" type="text" />
		<input type="submit" value="draw" />
	</form>
</html>